<template>
  <div class="cart-list" v-if="shopCartList.length">
    <div v-for="(item,index) in shopCartList" :key="index">
      <cart-item :cart-item-info="item"/>
    </div>
  </div>
  <div class="emptyCartList" v-else>
    <div class="emptyCartImg">
      <img src="~@/assets/img/cart/empty_cart.svg" alt="">
    </div>
    <p>购物车竟然是空的</p>
    <p>再忙，也要记得买点什么犒赏自己~</p>
  </div>
</template>

<script>
import CartItem from "./CartItem";

export default {
  name: "CartList",
  props: {
    shopCartList: {
      type: Array,
      default() {
        return [];
      }
    },
  },
  components: {
    CartItem
  }
}
</script>

<style scoped>
.emptyCartList .emptyCartImg {
  width: 80px;
  height: 80px;
  padding: 15px;
  border-radius: 50%;
  margin: 20px auto;
  background-color: var(--color-tint);
}

.emptyCartList .emptyCartImg img {
  width: 100%;
}

.emptyCartList p {
  text-align: center;
  margin: 10px 0;
}

.emptyCartList p:first-child {
  font-size: var(--font-size);
  color: #000;
}

.emptyCartList p:last-child {
  font-size: 13px;
  color: #999;
}
</style>